<script setup lang="ts">
import { fetchRecordDetails, type LogDataRecord } from '@/api/admin/historyRecord'
import { rate } from '@/api/admin/public'

const router = useRouter()

const query = (useRoute().query || {
  medical_record_number: '',
  created_date: '',
}) as {
  medical_record_number: string
  created_date: string
}

const rateResult = ref()

const recordDetails = ref<LogDataRecord | null>(null)

const getRecordDetails = async () => {
  try {
    const response = await fetchRecordDetails(query.medical_record_number, query.created_date)
    if (response) {
      recordDetails.value = response
    }
  } catch (error: any) {
    ElMessage.error(error?.errorDetails.description || error?.message || '未知错误')
  }
}

const question = ref<Record<string, string>>({})

const fechQuestion = async () => {
  try {
    const response = await fetch('http://localhost:8000/static/eye.json')
    if (response.ok) {
      question.value = await response.json()
    }
  } catch (error: any) {
    ElMessage.error('获取评分失败')
    console.error('获取评分失败: ', error)
  }
}

const handleSubmit = async () => {
  if (!rateResult.value && rateResult.value !== 0) {
    ElMessage.warning('请先选择评分')
    return false
  }
  try {
    await rate({
      medical_record_number: query.medical_record_number,
      created_date: query.created_date,
      category: 'eye_tracking',
      score: rateResult.value,
    })
    router.push({
      path: '/handwriting',
      query: {
        medical_record_number: query.medical_record_number,
        created_date: query.created_date,
      },
    })
  } catch (error) {
    ElMessage.error('评分失败')
    console.error('评分失败: ', error)
  }
}

const handleBack = () => {
  router.push({
    path: '/facialExpression',
    query: {
      medical_record_number: query.medical_record_number,
      created_date: query.created_date,
    },
  })
}

const videoSrc = computed(() => {
  const srcKey =
    Object.keys(recordDetails.value?.eye_tracking || {}).find((key) => {
      return key.endsWith('.mp4')
    }) || ''
  let src = recordDetails.value?.eye_tracking?.[srcKey]
  if (src) {
    src = `http://localhost:8000/${src}`.replace(/\\+/g, '/')
  } else {
    src = ''
  }
  return src
})

onMounted(() => {
  fechQuestion()
  getRecordDetails()
})
</script>

<template>
  <el-row :gutter="48" class="h-full -mr-6">
    <el-col :span="12" class="flex! flex-col items-center justify-center h-full p-4">
      <video :src="videoSrc" controls class="max-w-full max-h-full object-contain w-full h-auto" />
    </el-col>
    <el-col :span="12" class="h-full overflow-auto pr-6">
      <div class="text-brand text-2xl">当前结果：</div>
      <div class="text-#00BA3D font-500 mt-4">
        <span class="text-4xl">{{ rateResult || 0 }}</span>
        <span class="text-lg ml-1">分</span>
      </div>
      <div class="text-brand text-lg mt-4">{{ question[rateResult] || '' }}</div>
      <div class="text-#0167bc text-2xl mt-12">结果修改：</div>
      <el-radio-group v-model="rateResult" class="mt-4">
        <el-radio v-for="rate in Object.keys(question)" :key="rate" :value="Number(rate)">
          {{ question[rate] }}
        </el-radio>
      </el-radio-group>
      <div class="flex items-center justify-evenly gap-8 mt-12">
        <el-button type="primary" class="flex-1" @click="handleSubmit">提交结果</el-button>
        <el-button class="brand-dark-button flex-1" @click="handleBack">返回上一页</el-button>
      </div>
    </el-col>
  </el-row>
</template>

<style lang="css" scoped>
:deep(.el-radio) {
  display: block;
  width: 100%;
}
:deep(.el-radio) {
  --el-color-primary: #508bcc;
  --el-radio-font-size: 16px;
  margin-bottom: 8px;
}
:deep(.el-button) {
  padding: 18px 0;
}
</style>
